<!DOCTYPE html>
<html>
    <head>
        <title>touch,gesture</title>
        <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../avalon.js"></script>
        <script>
        	window.onerror = function(e) {
        		alert(JSON.stringify(e))
        	}
        </script>
        <style type="text/css">
        	*{
        		padding: 0;
        		margin: 0;
        	}
			.type{
				border: 1px solid #ccc;
				width: 300px;
				margin:10px auto;
				height: 300px;
				position: relative;
				overflow: hidden;
			}
			.type .box{
				border: 1px solid #c00;
				width: 100px;
				height: 100px;
				margin: 20px auto;
				text-align: center;
			}
			.list{
				position: absolute;
				top:20px;
				width: 500%;
				border-top: 1px solid #c00;
				border-bottom: 1px solid #c00;
				transition: all 0.5s;
			}
			.item{
				width: 20%;
				text-align: center;
				line-height: 150px;
				height: 150px;
				list-style: none;
				float: left;
			}
			#log{
				position: fixed;
				right: 0;
				top:0;
				width:200px;
				height: 100px;
				overflow-y: scroll;
				overflow-x: hidden;
				background: green;
				z-index: 1000;
			}
            fieldset {
                font-size: 12px;
                width: 90%;
                padding: 5px;
                margin: 10px auto;
            }
        </style>
    </head>
    <body ms-controller="test" 
          ms-on-tap="tap" 
          ms-on-doubleTap="doubleTap" 
          ms-on-hold="hold" 
          ms-on-squeeze="squeeze"
          ms-on-splay="splay">
          squeeze, squeeze, tap, doubletap, hold binded on body
        <div id="log">
        	<p 
        	   ms-repeat-item="log" 
        	   ms-on-touchstart="stop" 
        	   ms-on-touchmove="stop"
        	   ms-on-touchend="stop">{{item}}</p>
        </div>
        <div class="type" 
             ms-on-swipeLeft="swipeLeft" 
             ms-on-swipeRight="swipeRight"
             ms-on-swipe="swipe">
             swip me
        	<ul class="list" 
        	    ms-css-left="-100*index+'%'">
        		<li class="item" 
        		    ms-repeat-dataItem="[1,2,3,4,5]">
        			swip-{{$index+1}}{{swipeLog}}
        		</li>
        	</ul>
        </div>
        <div class="type"
    	     ms-on-doubletap="pinch2"
    	     ms-on-pinch="pinch">
        		pinch{{pinchLog}}
        	<div class="box" style="width:200px;height:200px;background:red;" 
        	     ms-css-transform="'scale('+scale+')'">
        	</div>
        </div>
        <div class="type">
        	<div class="box" 
        	     ms-on-rotate="rotate" style="width:200px;height:200px;margin-top:50px;" 
        	     ms-css-transform="'rotate('+ transform + 'deg)'">
        		rotate{{rotateLog}}
        	</div>
        </div>
        <div class="type">
            <fieldset style="position: relative; z-index: 2">
                <legend>默认配置的单日历框</legend>
                <input ms-widget="datepicker"/>
                <p>说明：默认情况下，日历显示方式从周一到周日，显示一个月份，输输入域不允许为空，点击next、pre切换月份时，默认切换一个月，并且不可通过下拉框切换月份和年份</p>
            </fieldset>
        </div>
        <div class="type">
            <fieldset>
                <select ms-widget="dropdown,$,opts"
                    ms-duplex="value">
                </select>
            </fieldset>
        </div>
    	<script>
			window.__log = function(log) {
				model.log.unshift(log)
			}
            var model
        	require(["./touch/avalon.touch", "./dropdown/avalon.dropdown", "./datepicker/avalon.datepicker"], function() {
	        	var index = 0
                model = avalon.define("test", function(vm){
                    vm.index = 0
                    vm.log = []
                    vm.value = ""
                    vm.stop = function(e) {
                        e.stopPropagation()
                    }
                    vm.tap = function(e) {
                        vm.log.unshift("taped " + index++)
                    }
                    vm.doubleTap = function(e) {
                        vm.log.unshift("doubleTaped " + index++)
                    }
                    vm.hold = function(e) {
                        vm.log.unshift("holded" + index++)
                    }
                    vm.doubleTap = function(e) {
                        vm.log.unshift("doubleTaped " + index++)
                    }
                    vm.opts = {
                        data: [
                            {
                                value: '1',
                                label: '1'
                            }, {
                                value: 2,
                                label: '2'
                            }, {
                                label: 'group1',
                                options: [
                                    {
                                        value: false,
                                        label: 'false'
                                    },
                                    {
                                        value: null,
                                        label: 'null'
                                    }
                                ]
                            }, {
                                label: 'group2',
                                options: [
                                    {
                                        value: 'disabled',
                                        label: 'disabled',
                                        enable: false
                                    }
                                ]
                            }
                        ]
                    }
                    vm.swipeLog = ""
                    vm.swipe = function(e) {
                        vm.swipeLog = "-haha, swipe me " + index++
                    }
                    vm.swipeLeft = function(e) {
                        if(vm.index !== 4) {
                            vm.index++
                        }
                    }
                    vm.swipeRight = function(e) {
                        if(vm.index !== 0) {
                            vm.index--
                        }
                    }
                    vm.pinchLog = " pinch me"
                    vm.scale = 1
                    vm.pinch = function(e) {
                        vm.pinchLog = " pinched " + e.detail.direction + " " + index++
                        vm.scale = (vm.scale * e.detail.scale).toFixed(2)
                        // __log(e.detail.scale)
                    }
                    vm.splay = function(e) {
                        vm.pinch(e)
                        __log("splay: " + e.detail.scale)
                    }
                    vm.squeeze = function(e) {
                        vm.pinch(e)
                        __log("squeeze: " + e.detail.scale)
                    }
                    vm.pinch2 = function(e) {
                        vm.scale = vm.scale * 2
                    }
                    vm.rotateLog = " rotate me"
                    vm.transform = 0
                    vm.rotate = function(e) {
                        vm.rotateLog = " rotated" + index++
                        vm.transform = (parseInt(e.detail.deflection) + vm.transform) % 360
                        __log(e.detail.deflection)
                    }
                })
                avalon.scan()
			})
        </script>
    </body>
</html>